<template>
	<view class="layer">
		<IndexHead :config="navConfig"/>
		
		<!-- 认证信息 -->
		<view class="renzheng">
			<view>
				<view class="SG">┃</view><i>认证信息</i>
			</view>
		</view>
		<view class="table1">
			<form action="">
				<view class="order-info-line">
					<text class="order-label">姓 名</text>
					<input type="text" placeholder="输入姓名" placeholder-style="color:#999999;" class="order-input">
				</view>
				<view class="order-info-line">
					<text class="order-label">身份证号</text>
					<input type="text" placeholder="输入身份证号" placeholder-style="color:#999999;" class="order-input">
				</view>
			</form>
		</view>
		
		
		<!-- 识别认证 -->
		<view class="shibie">
			<view>
				<view class="SG">┃</view><i>证件照片</i>
			</view>
		</view>
		<view class="table2">
			<view class="wenzi">请拍摄并上传你的身份证照片</view>
			<view>	
				<view class="kOne">
					<view class="rect">
						<image src="/static/myPic/renxiang.png" mode=""></image>
					</view>
						<view class="di"><i>拍摄人像页照片</i></view>
				</view>
				<view class="kTwo">
					<view class="rect">
						<image src="/static/myPic/guohui.png" mode=""></image>
					</view>
						<view class="di"><i>拍摄国徽页照片</i></view>
				</view>
			</view>
			<view>
				<view class="kThree">
					<view class="rect">
						<view class="threeK">
							<image src="/static/myPic/shouchi.png" mode=""></image>
						</view>
					</view>
							<view class="di"><i>上传手持身份证照片</i></view>
				</view>
			</view>
		</view>
		
		<!-- 人像照片 -->
		<view class="shibie">
			<view>
				<view class="SG">┃</view><i>人脸识别</i>
			</view>
		</view>
		<view class="renxiang">
			<image src="../../../static/myPic/renlian.png"></image>
			<!-- 采集 -->
			<navigator class="btn" url="">
				<text>开始采集</text>
			</navigator>
		</view>
		
		<!-- 下一步 -->
		<navigator url="/pages/my/myRealName/bindBankCard" class="next">
			<text>下一步</text>
			<image src="../../../static/myPic/xiayibu.png" ></image>
		</navigator>
		
		
	</view>
</template>

<script>
import xflSelect from '@/components/xfl-select/xfl-select.vue';
	export default{
		components: { xflSelect },
			data(){
				return{
					navConfig:{
						backgroundColor: 'transparent',
						color: '#fff',
						common:{
							hasSearch:false,
							hasMenu:false,
							hasTitle:true,
							minHead:true,
						},
						left: {
							img:'',
							text:'',
						},
						mid:{
							title:'实名认证',
							hasSearchMid:false
						},
						right:{
							
						}
					},
					curTabIndex: 0,


					listBoxStyle: `height: 60upx; width:300upx; font-size: 28upx;margin-left:50upx`,
					list: [
						'中国银行',
						'中国建设银行',
						'中国农业银行',
						'中国工商银行',
						'中国招商银行',
					],
					listUsing: [
						'中国银行',
						'中国建设银行',
						'中国农业银行',
						'中国工商银行',
						'中国招商银行',
					],
					showList: false
					
				}
			},
			methods: {
				change({newVal, oldVal, index, orignItem}){ 
					console.log(newVal, oldVal, index, orignItem);
				},
				inputHandle(event) {
					console.log(event);
					this.listUsing = this.list.filter( item => {
						if(typeof item == 'object') {
							return item.value.includes(event.detail.value)
						} else {
							return item.includes(event.detail.value);
						}
					});
					if(this.listUsing.length) this.showList = true;
				}
			}
			
		}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	
	i {
		font-style: normal;
	}
	
	.layer{
		position: absolute;
		width: 750upx;
		height: 1334upx;
		background-color: #fff;
	}
	
	
	/* 认证信息 */
	.renzheng{
		width: 540upx;
		margin-top: 20upx;
		margin-left: 6upx;
		height:27upx;
	}
	.renzheng .SG{
		color: #54B0FF;
		width: 5upx;
		height: 23upx;
		margin-left: 12upx;
		font-size: 23upx;
		float: left;
	}
	.renzheng i{
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #010101;
		margin-left: 52upx;
	}
	
	.table1{
		width: 690upx;
		height: 200upx;
		box-shadow: 0px 0px 15px 0px rgba(232,232,232,1);
		margin-left: 30upx;
		margin-top: 37upx;
		border-radius: 15upx;
		
	}
	.table1 .two>view{display: inline-block;}
	form view{
		display: block;
	}
	.table1 label{
		width: 120upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #333333;
		margin-left: 52upx;
		margin-top: 30upx;
		float: left;
	}
	.table1 .one{  
		margin-left: 68upx;
		margin-top: 25upx;
		width: 166upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #BBBBBB;
		float: left;
	}
	.table1 hr{
		float: left;
		border: none;
		margin-left: 42upx;
		width: 644upx;
		height: 0.1upx;
		color: #F6F6F6;
		margin-top: 70upx;
	}
	.table1 .two{
		float: left;
		width: 138upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #BBBBBB;
		margin-left: 52upx;
		margin-top: 30upx;
		margin-bottom: 30upx;
	}
	.order-info-line{
		width: 614upx;
		margin-top: 34upx;
		margin-left: 22upx;
		display: flex;
		flex-direction: row;
	}
	.order-label{
		width: 173upx;
		display: block;
		line-height: 50upx;
		font-size: 30upx;
		height: 50upx;
		padding-top: 22upx;
		margin-left: 30upx;
	}
	.order-input{
		height: 50upx;
		width: 400upx;
		font-size: 28upx;
		padding-top: 18upx;
		margin-left: 80upx;
	}
	.table1 .huoqu{
		margin-top: 38upx;
		margin-left: 90upx;
		width: 185upx;
		height: 56upx;
		background: #54B1FF;
		border-radius: 35upx;
		float: left;
	}
	.table1 .huoqu navigator{
		font-size: 28upx;
		font-family: Microsoft YaHei Regular;
		color: #fff;
		position: absolute;
		margin-left: 24upx;
		margin-top: 10upx;
	}
	/* 银行卡信息 */
		.yhKa{
			width: 540upx;
			margin-top: 20upx;
			margin-left: 6upx;
			height:27upx;
		}
		.yhKa .SG{
			color: #54B0FF;
			width: 5upx;
			height: 23upx;
			margin-left: 12upx;
			font-size: 23upx;
			float: left;
		}
		.yhKa i{
			font-size: 28upx;
			font-family: PingFang SC Regular;
			color: #010101;
			margin-left: 52upx;
		}
		
		/* 银行卡表单 */

		.bank-kind-input {
			display: flex;
			align-items: center;
		}
		.table2s{
			width: 690upx;
			height: 337upx;
			box-shadow: 0upx 0upx 15upx 0upx rgba(232,232,232,1);
			margin-left: 30upx;
			margin-top: 50upx;
			border-radius: 15upx;
		}
		.table2s .label1{
			width: 120upx;
			height: 26upx;
			font-size: 28upx;
			font-family: PingFang SC Regular;
			color: #333333;
			margin-left: 52upx;
			margin-top: 10upx;
			float: left;
		}
		.table2s .label2{
			width: 200upx;
			height: 26upx;
			font-size: 28upx;
			font-family: PingFang SC Regular;
			color: #333333;
			margin-left: 52upx;
			margin-top: 10upx;
			float: left;
		}
		.table2s .one{  
			margin-left: 90upx;
			margin-top: 32upx;
			width: 266upx;
			height: 26upx;
			font-size: 28upx;
			font-family: PingFang SC Regular;
			color: #BBBBBB;
			float: left;
		}
		.table2s hr{
			border: none;
			margin-left: 42upx;
			width: 644upx;
			height: 0.1upx;
			color: #F6F6F6;
			margin-top: 40upx;
		}
		.table2s .two{
			margin-left: 140upx;
			margin-top: -1upx;
			width: 290upx;
			height: 26upx;
			font-size: 28upx;
			font-family: PingFang SC Regular;
			color: #BBBBBB;
			float: left;
		}
		.table2s .xiangji image{
			/* float: left; */
			margin-top: -20upx;
			margin-left: 10upx;
			width: 39upx;
			height: 32upx;
		}
		.table2s .three{
			margin-left: 310upx;
			margin-top: -5upx;
			width: 280upx;
			height: 26upx;
			font-size: 28upx;
			font-family: PingFang SC Regular;
			color: #BBBBBB;
			float: none;
		}
	/* 识别认证 */
	.shibie{
		margin-top: 33upx;		
		margin-left: 6upx;
		height:27upx;
	}
	.shibie .SG{
		color: #54B0FF;
		width: 5upx;
		height: 23upx;
		margin-left: 12upx;
		font-size: 23upx;
		float: left;
	}
	.shibie i{
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #010101;
		margin-left: 52upx;
	}
	.table2{
		position: relative;
		margin-left: 31upx;
		margin-top: 36upx;
		width: 690upx;
		height: 670upx;
		border-radius: 15upx;
		box-shadow: 0px 0px 15px 0px rgba(232,232,232,1);
	}
	.table2 .wenzi{
		/* margin-left: 28upx;
		margin-top: 34upx; */
		padding: 28upx 0 0 28upx;
		width: 340upx;
		height: 25upx;
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: rgba(102,102,102,1);
		line-height: 29upx;
	}
	.table2 .kOne{
		margin-top: 34upx;
		float: left;
		margin-left: 28upx;
		width: 298upx;
		height: 256upx;
		background-color: #F4F8FE;
	}
	.kOne image{
		margin-top: 41upx;
		margin-left: 58upx;
		width: 184upx;
		height: 118upx;
	}
	.kOne .di{
		margin-top: 34upx;
		width: 298upx;
		height: 55upx;
		background: #4280F2;
		border-radius: 0 0 10upx 10upx;
		position: absolute;
	}
	.kOne .di i{
		margin-left: 61upx;
		margin-top: 11upx;
		width: 180upx;
		height: 25upx;
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: #fff;
		line-height: 29upx;
	}
	.table2 .image-border{
		position: absolute;
		width: 220upx;
		height: 144upx;
	}
	.table2 .image-border1{
		top: 0;
		left: 0;
		border-left: 5upx solid #4280F2;
		border-top: 5upx solid #4280F2;
	}
	.table2 .image-border2{
		top: 0;
		right: -2px;
		border-right: 5upx solid #4280F2;
		border-top: 5upx solid #4280F2;
	}
	.table2 .image-border3{
		bottom: 0;
		left: 0;
		border-bottom: 5upx solid #4280F2;
		border-left: 5upx solid #4280F2;
	}
	.table2 .image-border4{
		bottom: 0;
		right: -2px;
		border-right: 5upx solid #4280F2;
		border-bottom: 5upx solid #4280F2;
	}
	
	/* 国徽 */
	.table2 .kTwo{
		float: left;
		margin-left: 28upx;
		margin-top: 34upx;
		width: 298upx;
		height: 256upx;
		background-color: #F4F8FE;
	}
	.kTwo image{
		margin-top: 41upx;
		margin-left: 57upx;
		width: 184upx;
		height: 119upx;
	}
	.kTwo .di{
		margin-top: 34upx;
		width: 298upx;
		height: 55upx;
		background: #4280F2;
		border-radius: 0 0 10upx 10upx;
		position: absolute;
	}
	.kTwo .di i{
		margin-left: 61upx;
		margin-top: 11upx;
		width: 180upx;
		height: 25upx;
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: #fff;
		line-height: 29upx;
	}
	/* 手持身份证 */
	
	.table2 .kThree{
		float: left;
		margin-left: 199upx;
		margin-top: 36upx;
		width: 294upx;
		height: 234upx;
		background-color: #F4F8FE;
	}
	.table2 .threeK{
		margin-left: 57upx;
		margin-top: 39upx;
		width: 180upx;
		height: 108upx;
		background: #fff;
	}
	.kThree image{
		margin-left: 46upx;
		width: 88upx;
		height:110upx;
	}
	.kThree .di{
		position: absolute;
		margin-top: 34upx;
		width: 294upx;
		height: 49upx;
		background: #4280F2;
		border-radius: 0 0 10upx 10upx;
	}
	.kThree .di i{
		margin-left: 40upx;
		margin-top: 11upx;
		width: 250upx;
		height: 25upx;
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: #fff;
		line-height: 29upx;
	}
	
	/*人脸识别*/
	.yhKa{
		width: 540upx;
		margin-top: 20upx;
		margin-left: 6upx;
		height:27upx;
	}
	.yhKa .SG{
		color: #54B0FF;
		width: 5upx;
		height: 23upx;
		margin-left: 12upx;
		font-size: 23upx;
		float: left;
	}
	.yhKa i{
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #010101;
		margin-left: 52upx;
	}
	.renxiang{
		width: 690upx;
		height: 463upx;
		opacity: 1;
		background: rgba(255,255,255,1);
		box-shadow: 0upx 0upx 15upx 0upx rgba(232,232,232,1);
		margin-top: 50upx;
		margin-left: 30upx;
		border-radius: 15upx;
	}
	.renxiang image{
		margin-left: 212upx;
		margin-top: 46upx;
		width: 260upx;
		height: 235upx;
	}
	
	/* 采集 */
	.btn{
		width: 388upx;
		height: 72upx;
		margin-left: 150upx;
		margin-top: 63upx;
		/* margin-bottom: 34upx; */
		border-radius: 35upx;
		background-image: linear-gradient(to right, #54B0FF,#577AFF);
		filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#577AFF', endColorstr='#54B0FF', GradientType=1); 
	}
	.btn text{
		width: 120upx;
		height: 28upx;
		padding: 17upx 0 0 139upx;
		font-size: 28upx;
		color: #fff;
		position: absolute;
	}
	
	/*下一步*/
	.next{
		width: 188upx;
		height: 52upx;
		margin-left: 280upx;
		margin-top: 63upx;
		border-radius: 35upx;
		margin-bottom: 34upx;
	}
	.next text{
		font-size: 32upx;
		font-family: PingFang SC Regular;
		color: rgba(86,148,255,1);
		float: left;
		margin-left: 30upx;
		margin-top: 0upx;
	}
	.next image{
		width: 29upx;
		height: 30upx;
		margin-left: 21upx;
	}
</style>
